<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    import { showImagePreview } from 'vant'
    import { collectTechListAPIRes } from '../../api'

    const router = useRouter()
    const finished = ref(false)
    const refreshing = ref(false)
    const listData = ref<any>([])

    const onLoad = async () => {
        const { data } = await collectTechListAPIRes({ location: '31.46912956237793,104.6651382446289' })
        if (refreshing.value) {
            listData.value = []
            refreshing.value = false
        }
        listData.value = data
    }
    const onRefresh = () => {
        listData.value = []
        finished.value = false
        refreshing.value = true
        onLoad()
    }
    const onToDetail = (id: number) => {
        router.push({
            path: '/tech/datail',
            query: { id }
        })
    }

    onMounted(() => {
        onLoad()
    })
</script>

<template>
    <van-nav-bar :border="false" fixed placeholder left-arrow @click-left="router.back()" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="pt-2.5" style="min-height: calc(100dvh - 50px - 224px);">
        <div v-if="listData.length > 0">
            <van-cell-group v-for="item in listData" :key="item.id" inset class="p-2.5 mb-2.5 mx-3"  @click="onToDetail(item.id)">
                <div class="flex items-center">
                    <van-image
                        round
                        width="3.5rem"
                        height="3.5rem"
                        fit="cover"
                        :src="item.avatar"
                        @click.stop="showImagePreview(item.avatar.split(','))"
                    />
                    <div class="flex-1 ml-2">
                        <div class="flex items-center justify-between">
                            <span class="text-base font-bold text-[#232a24]">{{ item.nickname }}</span>
                            <div class="flex-1 flex items-center px-3">
                                <van-tag color="#7C6186" @click.stop="showImagePreview(item.imgs.split(','))">相册</van-tag>
                            </div>
                            <div class="flex items-center">
                                <van-icon name="location" color="#7C6186" size="16" />
                                <span class="text-xs text-[#232a24] ml-0.5">{{ item.distance < 1000 ?  `${item.distance}m` : `${(item.distance / 2 / 500).toFixed(2)}km` }}</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between mt-1">
                            <div class="flex items-center">
                                <van-icon name="star" color="#7C6186" size="16" />
                                <span class="text-xs text-[#232a24] ml-0.5">5.0</span>
                            </div>
                            <span class="text-xs text-[#333]">单量:{{ item.orderCount < 100 ? item.orderCount : '99+' }}</span>
                            <span class="text-xs text-[#333]">收藏:{{ item.collectCount < 100 ? item.collectCount : '99+' }}</span>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <van-tag v-if="item.status == 1" round color="#7C6186" class="block text-center w-[3.5rem]">可服务</van-tag>
                    <van-tag v-if="item.status == 2" round type="warning" class="block text-center w-[3.5rem]">服务中</van-tag>
                    <van-tag v-if="item.status == 3" round color="#999" class="block text-center w-[3.5rem]">休息中</van-tag>
                    <div class="flex-1 ml-2">
                        <div class="flex items-center">
                            <van-icon name="shield-o" color="#7C6186" size="16" />
                            <span class="text-xs text-[#19c865] ml-0.5">平台认证</span>
                        </div>
                    </div>
                    <van-button color="#7C6186" size="mini" :disabled="item.status != 1">立即下单</van-button>
                </div>
            </van-cell-group>
        </div>
        <van-empty v-else image-size="100" description="暂无数据" />
    </van-pull-refresh>
</template>